<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" th:href="@{./assets/css/bootstrap.min.css}"/>
        <link rel="stylesheet" href="css/style.css" th:href="@{./css/style.css}"/>
        <link href="assets/css/codemirror.css" rel="stylesheet" th:href="@{./assets/css/codemirror.css}">
        <link rel="stylesheet" href="assets/css/ace.min.css" th:href="@{./assets/css/ace.min.css}" />
        <link rel="stylesheet" href="assets/css/font-awesome.min.css" th:href="@{./assets/css/font-awesome.min.css}"/>
		<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->
        <!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->
			<script src="assets/js/jquery.min.js" th:src="@{./assets/js/jquery.min.js}"></script>

		<!-- <![endif]-->

		<!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<![endif]-->

		<!--[if !IE]> -->

		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->

		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="assets/js/bootstrap.min.js" th:src="@{./assets/js/bootstrap.min.js}"></script>
		<script src="assets/js/typeahead-bs2.min.js" th:src="@{./assets/js/typeahead-bs2.min.js}"></script>
		<!-- page specific plugin scripts -->
		<script src="assets/js/jquery.dataTables.min.js" th:src="@{./assets/js/jquery.dataTables.min.js}"></script>
		<script src="assets/js/jquery.dataTables.bootstrap.js" th:src="@{./assets/js/jquery.dataTables.bootstrap.js}"></script>
        <script type="text/javascript" src="js/H-ui.js" th:src="@{./js/H-ui.js}"></script>
        <script type="text/javascript" src="js/H-ui.admin.js" th:src="@{./js/H-ui.admin.js}"></script>
        <script src="assets/layer/layer.js" type="text/javascript" th:src="@{./assets/layer/layer.js}"></script>
        <script src="assets/laydate/laydate.js" type="text/javascript" th:src="@{./assets/laydate/laydate.js}"></script>
<title>用户列表</title>
</head>

<body >

<div class="page-content clearfix" >
    <div id="Member_Ratings">
      <div class="d_Confirm_Order_style">
    <div class="search_style">
<!--        <form  action="/stockShowAll" >-->
      <ul class="search_content clearfix">
          <li>
              仓库  <select name="hous" id="HOUS"  onchange="func()">
                        <option value="" disabled selected hidden >请选择</option>
                        <option th:each="hou:${house}" th:text="${hou.warehouse_name}" th:value="${hou.warehouse_id}"></option>
                    </select>
          </li>
          <li>
              商品  <select name="pro" id="PRO" style="width: 180px">
                         <option value="" disabled selected hidden>请选择</option>
                         <option th:each="pro:${pros}" th:text="${pro.product_name}" th:value="${pro.product_id}"></option>
          </select>
          </li>
          <li style="width:90px;"><button type="button" class="btn_search" onclick="re()"><i class="icon-search"></i>查询</button></li>
      </ul>
<!--        </form>-->


    </div>
     <div class="table_menu_list"  >
       <table class="table table-striped table-bordered table-hover" id="sample-table" style="width: 100%" th:fragment="pageInfo">
		<thead>
		 <tr>
             <th width="25px">编号</th>
             <th width="20px">仓库</th>
             <th width="30px">商品</th>
             <th width="25px">数量</th>
			</tr>
		</thead>
           <tbody>
           <tr  th:each="stock:${stocks}">
               <td th:text="${stock.stock_id}"></td>
               <td th:text="${stock.hous.warehouse_name}"></td>
               <td th:text="${stock.product.product_name}"></td>
               <td th:text="${stock.amount}"></td>
           </tr>
           </tbody>

	</table>
   </div>
  </div>
 </div>
</div>
<!--添加用户图层-->

</body>
<script type="text/javascript" >
   function func(){
       var vs = $('select  option:selected').val();

       $.ajax({
           type : 'get',//请求方法类型
           dataType : 'json',//预期服务器返回的数据类型
           url : '/stockPro?hous='+vs,//相对路径访问 http://localhost/MySSMAuth/getAuthority2.form?roleid=xxx
           success : function(responseData) {
               showName(responseData);
           }
       });
   }
   function showName(responseData) {
       $("#PRO").find("option").remove();
       $('#PRO').append("<option value= >" + "请选择" + "</option>");
       for (var i = 0; i < responseData.length; i++) {
           var value = responseData[i].product_id;
           var lable = responseData[i].product_name;
           $('#PRO').append(
               "<option value=" + value + ">" + lable + "</option>");
       }
   }

</script>
<script  type="text/javascript" th:inline="none">
jQuery(function($) {
        var oTable1 = $('#sample-table').dataTable( {
        //"ordering": true,
        //"aaSorting": [ 0, "asc" ],//默认第几个排序
		"bStateSave": true,//状态保存
         "searching": false,
         "scrollX": false,
        "lengthMenu": [ 10, 50, 75, 100],
		 } );


        $('table th input:checkbox').on('click' , function(){
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
            .each(function(){
                this.checked = that.checked;
                $(this).closest('tr').toggleClass('selected');
            });

        });


        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            var w2 = $source.width();

            if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
            return 'left';
        }
})

function  re() {
    var hous = $("#HOUS").val();
    var pro = $("#PRO").val();
    var url = "/stockshow?hous="+hous+"&pro="+pro;
    $.ajax({
        url: url,
        success: function (data) {
            $("#sample-table").html(data);
        }
    })
}
</script>
</html>